{% extends "base.html" %}
{% import "_my_wtf_macros.html" as my_wtf_macros %}

{% block title %}万屏时代OPC--新增项目{% endblock %}

{% block panel_heading %}万屏时代OPC--新增项目{% endblock %}

{% block panel_body %}
    <form id="add-demand-form" action="{{ url_for('op_bp.add_demand') }}" method="post" class="form" role="form">

        <div class="well well-sm">发布者信息</div>
        {{ my_wtf_macros.form_field(form.user_mobile, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.user_nickname, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        <div class="well well-sm">地址信息</div>
        {{ my_wtf_macros.form_field(form.prov, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.city, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.addr, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        <div class="well well-sm">项目信息</div>
        {{ my_wtf_macros.form_field(form.cate, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.budget, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.bid_start_point, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.type, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.surr, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.color, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.span, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.size, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.malf, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.status, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.tag, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.source, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        <div class="form-group col-xs-1">
          <div class="row">
            {{ form.remark.label(class="control-label col-xs-12")|safe}}
          </div>
        </div>
        <div class="form-group col-xs-11">
          {{ form.remark(class="form-control",rows="7")|safe}}
        </div>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        <div class="form-group col-xs-1">
          <div class="row">
            {{ form.admin_remark.label(class="control-label col-xs-12")|safe}}
          </div>
        </div>
        <div class="form-group col-xs-11">
          {{ form.admin_remark(class="form-control",rows="7")|safe}}
        </div>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        <div class="well well-sm">录音信息</div>
        <div class="form-group col-xs-12">
          <div class="row">
            {{ form.audio_id.label(class="control-label col-xs-2")|safe }}
            <div class="col-xs-10" id="audio-choices">
            <input type="checkbox" name="audio_sensitive"><span style="color: red">是否敏感录音</span> <br>
              {% for item in form.audio_id %}
              <label class="control-label">
                {{ item()|safe }}
                {% if item.label.text==' '%}
                  无录音
                {% else %}
                  <audio src="{{ item.label.text|safe }}" controls="controls">
                    您的浏览器无法播放该音频。
                  </audio>
                    录音日期：{{ audio_date_map[item._value()] }}
                {% endif %}
              </label>
              <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="pull-right">
            <button type="submit" class="btn btn-success"
                    id="add-demand-btn">
                新增
            </button>
        </div>

    </form>

{% endblock %}


{% block scripts %}
{{ super() }}

<script>
    $(document).ready( function () {
        $('#prov').val('台湾省').change();
        get_city_choices();
        $("#city").val('台湾省');

        function hide_select2_input(tags){
            for (index in tags){
                $('#'+tags[index]).hide();
                $('#'+tags[index]).next('.select2').hide();
                $('label[for='+tags[index]+']').hide();
            }
        }

        function hide_input(tags){
            for (index in tags){
                $('#'+tags[index]).hide();
                $('label[for='+tags[index]+']').hide();
            }
        }

        function show_select2_input(tags){
            for (index in tags){
                $('#'+tags[index]).show();
                $('#'+tags[index]).next('.select2').show();
                $('label[for='+tags[index]+']').show();
            }
        }

        // 新增项目默认是安装. 所以先把故障分类隐藏
        var hide_select2_tags = new Array('malf');
        hide_select2_input(hide_select2_tags);

        // 省份与城市联动
        function get_city_choices(){
            var prov_name = $("#prov").val();
            if(prov_name != -1) {
                $.ajax({
                    url: "{{ url_for('op_bp.ajax_get_cities') }}" + "?prov_name=" + prov_name,
                    cache: true
                }).done(function (data) {
                    $("#city").empty();
                    for (var i = 0; i < data["choices"].length; i++) {
                        var id = data["choices"][i]["id"];
                        var name = data["choices"][i]["name"];
                        $("#city").append(
                            "<option value='" + id + "'>" + name + "</option>"
                        );
                    }
                }).fail(function () {
                    alert("获取城市列表失败，请联系系统管理员!")
                });
            }
        }
        $("#prov").change(function (){
            get_city_choices();
        });

        // 选择屏幕类型后，相关参数联动
        function set_screen_default_value(){
            var type = $("#type").val();
            if (type=="1"){
                $("#surr").val("3");
                $("#color").val("1");
                $("#span").val("P10");
            }else if(type=="2"){
                $("#surr").val("1");
                $("#color").val("3");
                $("#span").val("P10");
            }else if(type=="3"){
                $("#surr").val("1");
                $("#color").val("1");
                $("#span").val("P10");
            }else if(type=="4"){
                $("#surr").val("2");
                $("#color").val("3");
                $("#span").val("P4");
            }else if(type=="5"){
                $("#surr").val("2");
                $("#color").val("3");
                $("#span").val("P2.0");
            }else {
                $("#surr").val("1");
                $("#color").val("3");
                $("#span").val("P10");
            }
            $("#surr").change();
            $("#color").change();
            $("#span").change();
        }
        set_screen_default_value();
        $("#type").change(function (){
            set_screen_default_value();
        });

        // 电话号码与用户昵称联动
        function get_user_nickname(){
            var user_mobile = $("#user_mobile").val();
            $.ajax({
                url: "{{ url_for('op_bp.ajax_get_user_nickname') }}" + "?user_mobile=" + user_mobile,
                cache: true
            }).done(function(data){
                var nickname = data["nickname"];
                $("#user_nickname").val(nickname);
            }).fail(function(){
                alert("查询用户是否存在失败，请联系系统管理员!")
            });
        }
        $("#user_mobile").blur(function (){
            get_user_nickname();
        });

        // 电话号码与电话录音联动
        function get_user_audios(){
            var user_mobile = $("#user_mobile").val();
            $.ajax({
                url: "{{ url_for('op_bp.ajax_get_user_audios') }}" + "?user_mobile=" + user_mobile,
                cache: true
            }).done(function(data){
                console.log(data);
                $("#audio-choices label").remove();
                for (var i=0; i < data.length; i++) {
                    var id = data[i]["id"];
                    var src = data[i]["src"];
                    var record_date = data[i]["record_date"];
                    if (id==-1) {
                        $("#audio-choices").append(
                            "<label class='control-label'><input id='audio-" + i+ "' name='audio_id' type='radio' value='" + id + "'>无录音</label>"
                        );
                    } else {
                        $("#audio-choices").append(
                            "<label class='control-label'><input id='audio-" + i+ "' name='audio_id' type='radio' value='" + id + "'><audio src='" + src + "' controls='controls'>您的浏览器无法播放该音频。</audio>录音日期：" + record_date
                        );
                    }
                    $("#audio-choices").append("<div class='clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block'></div>"
                    )
                }
            }).fail(function(){
                alert("查询用户录音失败，请联系系统管理员!")
            });
        }
        $("#user_mobile").blur(function (){
            get_user_audios();
        });
        $('#cate').change(function(){
            var val = $(this).val();

            // 是否显示 维修--故障分类
            if(val == '2'){
                show_select2_input(new Array('malf'));
            }else{
                hide_select2_input(new Array('malf'));
            }

            // 安装/维修时是一种类型
            if(val == '1' || val == '2'){
                $("#type").empty();
                {% for key, value in demand_type_dic.items() %}
                    $("#type").append(
                        "<option value='" + {{ key }} + "'>" + '{{ value }}' + "</option>"
                    );
                {% endfor %}
            } else{
                // 租赁时是一种类型
                $("#type").empty();
                {% for key, value in demand_rent_type_dic.items() %}
                    $("#type").append(
                        "<option value='" + {{ key }} + "'>" + '{{ value }}' + "</option>"
                    );
                {% endfor %}
            }


        });
    });
</script>

{% endblock %}
